<template>
  <div class="nei">
    <input
      v-model="text"
      type="text"
      class="inp"
      placeholder="输入任务，回车键确认"
      @keyup.13="add"
    />
    <br />
    <div class="list">
      <div
        class="listZ"
        v-for="(item, index) in $store.state.data"
        :key="index"
        @mouseleave="item.flse = false"
        @mouseenter="item.flse = true"
        :class="{ ss: item.flse }"
      >
        <input
          v-model="item.fx"
          type="checkbox"
          name=""
          id=""
          @click="fu(item)"
        />
        <span>{{ item.text }}</span>
        <button class="remove" v-show="item.flse" @click="remove(item.id)">
          删除
        </button>
      </div>
    </div>
    <div class="di">
      <span>
        <input v-model="checked" type="checkbox" name="" id="" @click="quan" />
        全选
      </span>
      <span> 已选择：{{ result.length }} </span>
      /
      <span> 全部：{{ $store.state.data.length }} </span>
      <button class="rem" v-show="result.length" @click="remm">选中删除</button>
    </div>
  </div>
</template>

<script>
export default {
  //数据 属性
  data() {
    return {
      text: "",
      checked: false,
      ffche: false,
      result: [],
    };
  },
  mounted() {},
  // 方法 属性
  methods: {
    // 添加
    add() {
      if (this.text == "") {
        alert("输入不能为空");
      } else {
        this.$store.commit("add", this.text);
        this.text = "";
    
      }
    },
    //删除
    remove(id) {
      this.result.map((res, index) => {
        if (res.id == id) {
          this.result.splice(index, 1);
        }
      });
      this.$store.commit("remove", id);
    },
    //全选
    quan() {
      console.log(this.checked);
      if (this.checked == false) {
        this.checked = true;
        this.ffche = true;
      } else {
        this.checked = false;
        this.ffche = false;
      }
    },

    fu(item) {
      // console.log(item);
      let ff = false;
      this.result.map((res, index) => {
        if (res.id == item.id) {
          this.result.splice(index, 1);
          ff = true;
        }
      });
      if (ff == false) {
        this.result.push(item);
      }
      console.log(this.result);
      this.che();
    },
    //选中事件
    che() {
      if (this.$store.state.data.length == this.result.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      console.log(this.checked);
    },
    // 选中删除
    remm() {
      this.result.forEach((res, index) => {
        this.$store.commit("remove", res.id);
      });
      this.result = [];
    },
  },

};
</script>

<style lang="scss">
.nei {
  width: 1000px;
  border: 1px solid #000;
  margin: 20px auto 0;
  box-sizing: border-box;
  padding: 10px;
  .inp {
    width: 100%;
    height: 30px;
  }
  .list {
    margin: 10px 0;
    .ss {
      background: rgb(236, 236, 236);
    }
    .listZ {
      width: 100%;
      height: 30px;
      border-radius: 10px;
      border: 1px solid #ccc;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      padding: 10px;
      position: relative;
      span {
        margin-left: 20px;
      }
      .remove {
        font-size: 12px;
        position: absolute;
        right: 0;
        margin-right: 10px;
      }
    }
  }
  .di {
    width: 100%;
    span {
      margin-right: 10px;
    }
    .rem {
      background: rgb(253, 9, 9);
      color: #fff;
      font-size: 13px;
      padding: 5px;
      border-radius: 5px;
    }
  }
}
</style>
